<template>
    <div class="content">
      <div class="left-section">
        <!-- 物种多样性 -->
        <Multi />
        <!-- 物种统计 -->
        <SpeciesStatistics />
      </div>
      <div class="center-section">
<!--        <img src="@/assets/img/ledgend3.png" class="ledgend-img">-->
        <Center />
      </div>
      <div class="right-section">
        <!-- 物种列表 -->
        <SpeciesList />
        <!-- 物种介绍 -->
        <SpeciesIntroduction />
      </div>
    </div>
  </template>
  
  <script>
  import Multi from '@/components/SpeciesAccount/Multi.vue'
  import Center from '@/components/SpeciesAccount/Center.vue'
  import SpeciesStatistics from '@/components/SpeciesAccount/SpeciesStatistics.vue'
  import SpeciesList from '@/components/SpeciesAccount/SpeciesList.vue'
  import SpeciesIntroduction from '@/components/SpeciesAccount/SpeciesIntroduction.vue'
  import {EventBus} from "../utils/event-bus";
  export default {
    components: {
      Multi,
      Center,
      SpeciesStatistics,
      SpeciesList,
      SpeciesIntroduction
    },
    data() {
      return {
        position:{lon:121.444162, lat:31.148843,zoom:16.45}
      }
        
    },
    mounted() {
      EventBus.$emit('set-position', this.position);
    }
  }
  </script>
  <style lang="scss" scoped>
.ledgend-img {
  position: absolute;
  bottom: 70px;
  right: 5px;
  pointer-events: auto;
}
  </style>